<template>
  <el-dialog
    custom-class="__dialog"
    :size="dialog.size"
    :ref="dialog.ref"
    :before-close="dialogClose"
    :visible.sync="dialog.visible">
    <div slot="title" class="title">
      <slot name="title"></slot>
    </div>
    <slot></slot>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogClose" :plain="true" type="danger">取 消</el-button>
      <slot name="footer"></slot>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    props: {
      dialog: Object,
      close: Function,
      closeTip: { // 是否开启 关闭提示 默认 开启
        type: Boolean,
        default: true,
      },
    },
    methods: {
      dialogClose () {
        if (this.dialog.visible) {
          if (this.closeTip) {
            this.$confirm('您未保存的信息将会丢失。', '确认关闭？', {
              confirmButtonText: '是',
              cancelButtonText: '否',
              type: 'warning',
            })
              .then(_ => {
                this.closed();
              })
              .catch(_ => {});
          } else {
            this.closed();
          }
        }
      },
      closed () {
        this.dialog.visible = false;
        if (this.dialog.formRef) {
          this.close(this.dialog.formRef);
        } else {
          if (this.close) {
            this.close();
          } else {
            console.warn(this.dialog.ref + ' 不存在 close！');
          }
        }
      },
    },
  };
</script>


<style lang="scss">
  .__dialog{
    .el-dialog__header{
        .title{
          width: calc(100% - 60px);
          display: inline-block;
          p{
            line-height: 1;
            font-size: 16px;
            font-weight: 700;
            color: #1f2d3d;
          }
          span{
            float: right;
            font-size: 14px;
            margin-right: 30px;
          }
        }
      }
    .el-dialog__body{
      padding: 0 20px;
    }
  }
  @media screen and (max-width: 800px) {
    .el-dialog--small, .el-dialog--large{
      top: 0 !important;
      width: 101%;
    }
    .el-message-box{
      width:360px;
    }
  }
</style>
